<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="user">
    <button id="btn">点击</button>
</body>
<script>
    // toUpperCase()  字母转大写  返回转化后的新字符串
    // toLowerCase()  字母转小写  返回转化后的新字符串

    // var str = "Hello World";   
    // var upStr = str.toUpperCase();
    // console.log(upStr);

    // var lowStr = str.toLowerCase();
    // console.log(lowStr);

    // trim()  去重首尾空格   => 返回新的字符串
    // trimLeft() | trimStart()  去重头部空格   => 返回新的字符串
    // trimRight() | trimEnd()  去重头部空格   => 返回新的字符串

    var userInp = document.getElementById("user");
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var user = userInp.value.trim();
        // var user = userInp.value.trimLeft();
        var user = userInp.value.trimRight();
        console.log(1,user);

        userInp.value = user;   // 去除首尾空格之后 在放回输出框
    }







</script>
</html>